<template>
	<div class="mainer-container">
		<el-main>
			<el-row style="padding:20px 0;border-bottom: 1px solid #EBEEF5;">
				<el-col>
					<el-form :inline="true" :model="formInline">
						<el-form-item>
							<el-select v-model="formInline.status" placeholder="订单状态">
								<el-option label="委托中" value="0"></el-option>
								<el-option label="已成交" value="1"></el-option>
								<el-option label="已撤销" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-input placeholder="请输入关键字" v-model="formInline.symbol"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="info" @click="queryPage()">查询</el-button>
						</el-form-item>
						<el-form-item style="float: right; margin-right: 60px;">
							<el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true"> 下单</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-table :data="tableData" stripe>
				<el-table-column prop="id" label="序号" sortable align="center"></el-table-column>
				<el-table-column prop="symbol" label="名称" align="center">
					<template slot-scope="{row}">
						{{row.symbol.toUpperCase()}}
					</template>
				</el-table-column>
				<el-table-column prop="type" label="订单类型" align="center">
					<template slot-scope="{row}">
						{{row.type.indexOf("buy") !== -1 ? "买入":"卖出"}}
					</template>
				</el-table-column>
				<el-table-column prop="orderNo" label="订单号" align="center">
					<template slot-scope="{row}">
						{{row.orderNo}}
					</template>
				</el-table-column>
				<el-table-column prop="amount" label="交易量" align="center">
					<template slot-scope="{row}">
						{{row.amount}}
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" align="center">
					<template slot-scope="{row}">
						<el-tag size="medium" type="warning" v-if="row.status === 0">委托中</el-tag>
						<el-tag size="medium" type="success" v-else-if="row.status === 1">已成交</el-tag>
						<el-tag size="medium" type="info" v-else-if="row.status === 2">已撤销</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="下单时间" sortable align="center">
					<template slot-scope="{row}">
						{{$Moment(row.createTime).format("YYYY-MM-DD")}}
						<br>
						{{$Moment(row.createTime).format("HH:mm:ss")}}
					</template>
				</el-table-column>
				<el-table-column prop="finishTime" label="完成时间" sortable align="center">
					<template slot-scope="{row}">
						{{row.finishTime === null?"":$Moment(row.finishTime).format("YYYY-MM-DD")}}
						<br>
						{{row.finishTime === null?"":$Moment(row.finishTime).format("HH:mm:ss")}}
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" header-align="center" align="right" width="210px">
					<template slot-scope="{row}">
						<el-button size="mini" @click="cancelOrder(row)" type="warning" v-if="row.status === 0">撤销</el-button>
						<el-button size="mini" @click="queryInfo(row)" type="primary">详情</el-button>
						<el-button size="mini" @click="deleteOrder(row)" type="danger">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSize(size)" @current-change="handleNum(num)" @prev-click="handlePrev()" @next-click="handleNext()" :current-page.sync="num" :page-size="size" layout="prev, pager, next, total, jumper" :total="total"></el-pagination>
		</el-main>
		<el-dialog title='添加订单' :visible.sync="dialogVisible" width="40%">
			<template>
				<el-form ref="formData" :model="formData" :rules="rules" label-width="100px" :hide-required-asterisk="true" style="width: 90%;">
					<el-row>
						<el-col :span="11">
							<el-form-item label="交易对" prop="symbolId">
								<el-select v-model="formData.symbolId" placeholder="选择交易对" @change="currentPrice(formData.symbolId)">
									<el-option v-for="item in symbolData" :key="item.id" :value="item.id" :label="item.symbol"></el-option>
								</el-select>
								<div v-show="formData.symbolId">当前价格为：{{this.price}}</div>
							</el-form-item>
						</el-col>
						<el-col :span="11" :offset="2">
							<el-form-item label="订单类型" prop="type">
								<el-select v-model="formData.type" placeholder="选择订单类型" @change="orderTypeChange(formData.type)">
									<el-option label="买入" value="1"></el-option>
									<el-option label="卖出" value="2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="交易数量" prop="amount">
						<el-input v-model="formData.amount" placeholder="0.00000000"></el-input>
					</el-form-item>
					<el-form-item label="买入价格" v-show="buyVisible">
						<el-input v-model="formData.buyPrice" placeholder="0.00000000"></el-input>
					</el-form-item>
					<el-form-item label="卖出价格" v-show="sellVisible">
						<el-input v-model="formData.sellPrice" placeholder="0.00000000"></el-input>
					</el-form-item>
				</el-form>
			</template>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false" size="small">关闭</el-button>
				<el-button @click="addOrder()" size="small" type="primary">添 加</el-button>
			</span>
		</el-dialog>
		<el-dialog title="订单详情" :visible.sync="dialogVisibleDetail" width="40%" top="20px">
			<template>
				<el-form ref="formDataDetail" :model="formDataDetail" label-width="100px" style="width: 90%;">
					<el-form-item label="订单号">
						<el-input v-model="formDataDetail.orderNo" disabled></el-input>
					</el-form-item>
					<el-row>
						<el-col :span="11">
							<el-form-item label="交易对">
								<el-select v-model="formDataDetail.symbolId">
									<el-option :value="formDataDetail.symbolId" :label="formDataDetail.symbol.toUpperCase()"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="11" :offset="2">
							<el-form-item label="订单类型">
								<el-select v-model="formDataDetail.type">
									<el-option :value="formDataDetail.type" :label="formDataDetail.type.indexOf('buy') !== -1 ?'买入':'卖出'"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="交易数量">
						<el-input v-model="formDataDetail.amount" placeholder="0.00000000"></el-input>
					</el-form-item>
					<el-form-item label="买入价格" v-if="formDataDetail.type.indexOf('buy') !== -1">
						<el-input v-model="formDataDetail.price" placeholder="0.00000000"></el-input>
					</el-form-item>
					<el-form-item label="卖出价格" v-if="formDataDetail.type.indexOf('sell') !== -1">
						<el-input v-model="formDataDetail.price" placeholder="0.00000000"></el-input>
					</el-form-item>
					<el-form-item label="撤单申请时间" v-if="formDataDetail.cancelTime !== null">
						<el-input v-model="formDataDetail.cancelTime == null?'':$Moment(formDataDetail.cancelTime).format('YYYY-MM-DD HH:mm:ss')" placeholder="YYYY-MM-DD HH:mm:ss"></el-input>
					</el-form-item>
					<el-form-item label="成交时间">
						<el-input v-model="formDataDetail.finishTime === null?'':$Moment(formDataDetail.finishTime).format('YYYY-MM-DD HH:mm:ss')" placeholder="YYYY-MM-DD HH:mm:ss"></el-input>
					</el-form-item>
					<el-form-item label="成交数量">
						<el-input v-model="formDataDetail.filledAmount" placeholder="0.00000000"></el-input>
					</el-form-item>
					<el-form-item label="成交总金额">
						<el-input v-model="formDataDetail.filledCashAmount" placeholder="0.00000000"></el-input>
					</el-form-item>
					<el-form-item label="手续费">
						<el-input v-model="formDataDetail.filledFees" placeholder="0.00000000"></el-input>
					</el-form-item>
				</el-form>
			</template>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleDetail = false" size="small">关闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "orderInfo",
		data() {
			return {
				dialogVisible: false,
				dialogVisibleDetail: false,
				buyVisible: false,
				sellVisible: false,
				num: 1,
				size: 8,
				price: 0.00,
				formInline: {
					status: "",
					symbol: "",
				},
				tableData: [],
				symbolData: [],
				total: 0,
				formData: {
					symbolId: "",
					type: "",
					amount: "",
					buyPrice: "",
					sellPrice: ""
				},
				formDataDetail: {
					symbol: "",
					type: ""
				},
				rules: {
					symbolId: [
						{required: true, message: '请选择交易对', trigger: 'change'}
					],
					type: [
						{required: true, message: '请选择订单类型', trigger: 'change'}
					],
					amount: [
						{required: true, message: '请输入交易数量'}
					]
				}
			}
		},
		created() {
			this.queryPage();
		},
		watch: {
			dialogVisible(newVal) {
				if (!newVal) {
					this.$refs['formData'].resetFields();
					this.buyVisible = false;
					this.sellVisible = false;
					this.id = 0;
				} else {
					this.api.basicInfo.symbolKline.queryAll().then(result => {
						result = result.data;
						if (result.code === 200) {
							this.symbolData = result.data;
						}
					});
				}
			}
		},
		methods: {
			orderTypeChange(type) {
				if (type === '1') {
					this.buyVisible = true;
					this.sellVisible = false;
				} else if (type === '2') {
					this.buyVisible = false;
					this.sellVisible = true;
				}
			},
			currentPrice(id) {
				this.api.basicInfo.symbolKline.queryInfo({symbolId: id}).then(result => {
					result = result.data;
					if (result.code === 200) {
						result = result.data;
						this.price = result[result.length - 1].close;
					}
				});
			},
			queryPage() {//分页
				this.api.order.queryPage({
					num: this.num,
					size: this.size,
					status: this.formInline.status,
					symbol: this.formInline.symbol
				}).then(result => {
					result = result.data;
					if (result.code === 200) {
						this.tableData = result.data;
						this.num = result.page.num;
						this.size = result.page.size;
						this.total = result.page.total;
						this.formInline.status = "";
						this.formInline.symbol = "";
					} else {
						this.$message({
							message: result.message,
							type: "warning"
						});
					}
				}).catch(() => {
					this.$message({
						message: "网络错误",
						type: "danger"
					});
				});
			},
			addOrder() {//下单
				this.$refs['formData'].validate((valid) => {
					if (valid) {
						this.api.order.save(this.formData).then(result => {
							result = result.data;
							if (result.code === 200) {
								this.$message({
									message: result.message,
									type: "success"
								});
								this.dialogVisible = false;
							} else {
								this.$message({
									message: result.message,
									type: "warning"
								});
							}
							this.queryPage();
						}).catch(() => {
							this.$message({
								message: "网络错误",
								type: "danger"
							});
						});
					}
				});
			},
			queryInfo(row) {//查询详情
				this.id = row.id;
				this.dialogVisibleDetail = true;
				this.api.order.queryInfo({id: row.id}).then(result => {
					result = result.data;
					if (result.code === 200) {
						this.formDataDetail = result.data;
					} else {
						this.$message({
							message: result.message,
							type: "warning"
						});
					}
				}).catch(() => {
					this.$message({
						message: "网络错误",
						type: "danger"
					});
				});
			},
			cancelOrder(row) {//撤销订单
				this.$confirm('确认撤销【' + row.symbol.toUpperCase() + ' - 订单号：' + row.orderNo + '】嘛？').then(() => {
					this.api.order.cancel({id: row.id}).then(result => {
						result = result.data;
						if (result.code === 200) {
							this.$message({
								message: result.message,
								type: "success"
							});
						} else {
							this.$message({
								message: result.message,
								type: "warning"
							});
						}
						this.queryPage();
					});
				});
			},
			deleteOrder(row) {//删除
				this.$confirm('确认删除【' + row.symbol.toUpperCase() + ' - 订单号：' + row.orderNo + '】嘛？').then(() => {
					this.api.order.delete({id: row.id}).then(result => {
						result = result.data;
						if (result.code === 200) {
							this.$message({
								message: result.message,
								type: "success"
							});
						} else {
							this.$message({
								message: result.message,
								type: "warning"
							});
						}
						this.queryPage();
					}).catch(() => {
						this.$message({
							message: "网络错误",
							type: "danger"
						});
					});
				});
			},
			handlePrev() {
				this.num -= 1;
				this.queryPage();
			},
			handleNext() {
				this.num += 1;
				this.queryPage();
			},
			handleSize(size) {
				this.size = size;
				this.queryPage();
			},
			handleNum(num) {
				this.num = num;
				this.queryPage();
			}
		}
	}
</script>

<style scoped>
	.mainer-container {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		margin-bottom: 5px;
	}

	.el-pagination {
		width: 100%;
		text-align: center;
	}
</style>
